<template>
  <div class="filter-panel" :class="{ 'is-expanded': isExpanded }">
    <!-- 筛选器切换按钮 -->
    <button 
      class="filter-toggle"
      @click="togglePanel"
      :aria-expanded="isExpanded"
    >
      <span class="filter-icon">🔧</span>
      <span class="filter-text">筛选器</span>
      <span class="filter-count" v-if="activeFiltersCount > 0">{{ activeFiltersCount }}</span>
      <span class="toggle-arrow" :class="{ 'is-rotated': isExpanded }">▼</span>
    </button>

    <!-- 筛选内容 -->
    <div class="filter-content" v-show="isExpanded">
      <div class="filter-grid">
        <!-- 类型筛选 -->
        <div class="filter-group">
          <h4 class="filter-title">
            <span class="filter-title-icon">📂</span>
            类型
          </h4>
          <div class="filter-options">
            <label 
              v-for="type in availableTypes" 
              :key="type"
              class="filter-option"
            >
              <input
                type="checkbox"
                :value="type"
                v-model="selectedTypes"
                @change="updateFilters"
              />
              <span class="filter-checkbox"></span>
              <span class="filter-label">{{ getTypeLabel(type) }}</span>
              <span class="filter-badge">{{ getTypeCount(type) }}</span>
            </label>
          </div>
        </div>

        <!-- 地区筛选 -->
        <div class="filter-group">
          <h4 class="filter-title">
            <span class="filter-title-icon">🌍</span>
            地区
          </h4>
          <div class="filter-options">
            <label 
              v-for="region in availableRegions" 
              :key="region"
              class="filter-option"
            >
              <input
                type="checkbox"
                :value="region"
                v-model="selectedRegions"
                @change="updateFilters"
              />
              <span class="filter-checkbox"></span>
              <span class="filter-label">{{ getRegionLabel(region) }}</span>
              <span class="filter-badge">{{ getRegionCount(region) }}</span>
            </label>
          </div>
        </div>

        <!-- 分类筛选 -->
        <div class="filter-group">
          <h4 class="filter-title">
            <span class="filter-title-icon">🏷️</span>
            分类
          </h4>
          <div class="filter-options">
            <label 
              v-for="category in availableCategories" 
              :key="category"
              class="filter-option"
            >
              <input
                type="checkbox"
                :value="category"
                v-model="selectedCategories"
                @change="updateFilters"
              />
              <span class="filter-checkbox"></span>
              <span class="filter-label">{{ category }}</span>
              <span class="filter-badge">{{ getCategoryCount(category) }}</span>
            </label>
          </div>
        </div>

        <!-- 年份范围筛选 -->
        <div class="filter-group">
          <h4 class="filter-title">
            <span class="filter-title-icon">📅</span>
            倒闭年份
          </h4>
          <div class="year-range-container">
            <div class="year-inputs">
              <div class="year-input-group">
                <label class="year-label">从</label>
                <input
                  type="number"
                  class="year-input"
                  :min="minYear"
                  :max="maxYear"
                  v-model.number="yearRange.start"
                  @change="updateFilters"
                  placeholder="开始年份"
                />
              </div>
              <div class="year-separator">-</div>
              <div class="year-input-group">
                <label class="year-label">到</label>
                <input
                  type="number"
                  class="year-input"
                  :min="minYear"
                  :max="maxYear"
                  v-model.number="yearRange.end"
                  @change="updateFilters"
                  placeholder="结束年份"
                />
              </div>
            </div>
            <div class="year-presets">
              <button
                v-for="preset in yearPresets"
                :key="preset.label"
                class="year-preset-btn"
                @click="setYearPreset(preset)"
                :class="{ 'is-active': isYearPresetActive(preset) }"
              >
                {{ preset.label }}
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 筛选操作 -->
      <div class="filter-actions">
        <button class="filter-clear-btn" @click="clearAllFilters">
          <span class="clear-icon">🗑️</span>
          清除所有筛选
        </button>
        <div class="filter-summary">
          已选择 {{ activeFiltersCount }} 个筛选条件
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useCemeteryStore } from '@/stores/cemetery'

const props = defineProps({
  defaultExpanded: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['filter-change'])

const store = useCemeteryStore()
const isExpanded = ref(props.defaultExpanded)

// 筛选状态
const selectedTypes = ref([])
const selectedRegions = ref([])
const selectedCategories = ref([])
const yearRange = ref({
  start: null,
  end: null
})

// 年份预设
const yearPresets = [
  { label: '近5年', start: 2019, end: 2024 },
  { label: '2015-2020', start: 2015, end: 2020 },
  { label: '2010-2015', start: 2010, end: 2015 },
  { label: '全部', start: null, end: null }
]

// 计算属性
const availableTypes = computed(() => store.availableTypes)
const availableRegions = computed(() => store.availableRegions)
const availableCategories = computed(() => store.availableCategories)

const minYear = computed(() => {
  const years = store.deadSites.map(site => site.year).filter(Boolean)
  return Math.min(...years)
})

const maxYear = computed(() => {
  const years = store.deadSites.map(site => site.year).filter(Boolean)
  return Math.max(...years)
})

const activeFiltersCount = computed(() => {
  let count = 0
  count += selectedTypes.value.length
  count += selectedRegions.value.length
  count += selectedCategories.value.length
  if (yearRange.value.start || yearRange.value.end) count += 1
  return count
})

// 方法
const togglePanel = () => {
  isExpanded.value = !isExpanded.value
}

const getTypeLabel = (type) => {
  const labels = {
    'website': '网站',
    'app': '应用',
    'service': '服务',
    'platform': '平台',
    'game': '游戏'
  }
  return labels[type] || type
}

const getRegionLabel = (region) => {
  const labels = {
    'domestic': '国内',
    'international': '国外'
  }
  return labels[region] || region
}

const getTypeCount = (type) => {
  return store.deadSites.filter(site => site.type === type).length
}

const getRegionCount = (region) => {
  return store.deadSites.filter(site => site.region === region).length
}

const getCategoryCount = (category) => {
  return store.deadSites.filter(site => site.category === category).length
}

const updateFilters = () => {
  // 直接更新store的筛选状态
  if (selectedTypes.value.length === 0) {
    store.currentFilter = 'all'
  } else {
    store.currentFilter = selectedTypes.value[0] // 只支持单选
  }
  
  if (selectedRegions.value.length === 0) {
    store.currentRegion = 'all'
  } else {
    store.currentRegion = selectedRegions.value[0] // 只支持单选
  }
  
  if (selectedCategories.value.length === 0) {
    store.currentCategory = 'all'
  } else {
    store.currentCategory = selectedCategories.value[0] // 只支持单选
  }
  
  const filters = {
    types: selectedTypes.value,
    regions: selectedRegions.value,
    categories: selectedCategories.value,
    yearRange: {
      start: yearRange.value.start,
      end: yearRange.value.end
    }
  }
  
  emit('filter-change', filters)
}

const setYearPreset = (preset) => {
  yearRange.value.start = preset.start
  yearRange.value.end = preset.end
  updateFilters()
}

const isYearPresetActive = (preset) => {
  return yearRange.value.start === preset.start && yearRange.value.end === preset.end
}

const clearAllFilters = () => {
  selectedTypes.value = []
  selectedRegions.value = []
  selectedCategories.value = []
  yearRange.value = { start: null, end: null }
  updateFilters()
}

// 初始化筛选状态（避免循环依赖，不使用watch）
const initializeFilters = () => {
  // 根据store当前状态初始化筛选器
  if (store.currentFilter !== 'all') {
    selectedTypes.value = [store.currentFilter]
  }
  if (store.currentRegion !== 'all') {
    selectedRegions.value = [store.currentRegion]
  }
  if (store.currentCategory !== 'all') {
    selectedCategories.value = [store.currentCategory]
  }
}

// 组件挂载时初始化
initializeFilters()
</script>

<style scoped>
.filter-panel {
  background: 
    radial-gradient(ellipse at 10% 20%, rgba(139, 69, 19, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(75, 0, 130, 0.06) 0%, transparent 50%),
    rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 140, 0, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(15px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 20px rgba(255, 140, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.filter-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.filter-toggle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 140, 0, 0.05) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.filter-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  text-shadow: 0 0 10px rgba(255, 140, 0, 0.3);
}

.filter-toggle:hover::before {
  opacity: 1;
}

.filter-icon {
  font-size: 1.2rem;
  margin-right: 0.75rem;
}

.filter-text {
  flex: 1;
  text-align: left;
}

.filter-count {
  background: var(--accent-color);
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  margin-right: 0.75rem;
  min-width: 20px;
  text-align: center;
}

.toggle-arrow {
  transition: transform 0.3s ease;
  font-size: 0.9rem;
  opacity: 0.7;
}

.toggle-arrow.is-rotated {
  transform: rotate(180deg);
}

.filter-content {
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.filter-group {
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 140, 0, 0.03) 0%, transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 1rem;
  position: relative;
  transition: all 0.3s ease;
}

.filter-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.05) 0%, transparent 50%);
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.filter-group:hover {
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 140, 0, 0.06) 0%, transparent 60%),
    rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 140, 0, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.filter-group:hover::before {
  opacity: 1;
}

.filter-title {
  display: flex;
  align-items: center;
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.filter-title-icon {
  margin-right: 0.5rem;
  font-size: 1rem;
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative;
}

.filter-option::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255, 140, 0, 0.1) 0%, transparent 100%);
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.filter-option:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(4px);
}

.filter-option:hover::before {
  opacity: 1;
}

.filter-option:hover .filter-label {
  color: rgba(255, 140, 0, 0.9);
}

.filter-option input[type="checkbox"] {
  display: none;
}

.filter-checkbox {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 140, 0, 0.3);
  border-radius: 3px;
  margin-right: 0.75rem;
  position: relative;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.05);
}

.filter-checkbox::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: rgba(255, 140, 0, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease;
}

.filter-option:hover .filter-checkbox {
  border-color: rgba(255, 140, 0, 0.6);
  box-shadow: 0 0 8px rgba(255, 140, 0, 0.2);
}

.filter-option:hover .filter-checkbox::before {
  transform: translate(-50%, -50%) scale(1);
}

.filter-option input[type="checkbox"]:checked + .filter-checkbox {
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.8) 0%, rgba(255, 100, 0, 0.9) 100%);
  border-color: rgba(255, 140, 0, 0.8);
  box-shadow: 
    0 0 12px rgba(255, 140, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.filter-option input[type="checkbox"]:checked + .filter-checkbox::before {
  display: none;
}

.filter-option input[type="checkbox"]:checked + .filter-checkbox::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 0.8rem;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.filter-label {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.filter-badge {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  min-width: 24px;
  text-align: center;
}

/* 年份范围样式 */
.year-range-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.year-inputs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.year-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.year-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.year-input {
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 140, 0, 0.2);
  border-radius: 6px;
  padding: 0.5rem;
  color: var(--text-primary);
  font-size: 0.9rem;
  width: 100%;
  transition: all 0.3s ease;
  position: relative;
}

.year-input:hover {
  border-color: rgba(255, 140, 0, 0.4);
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
}

.year-input:focus {
  outline: none;
  border-color: rgba(255, 140, 0, 0.6);
  box-shadow: 
    0 0 0 2px rgba(255, 140, 0, 0.2),
    0 0 12px rgba(255, 140, 0, 0.3);
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
}

.year-separator {
  color: var(--text-secondary);
  font-weight: bold;
  margin-top: 1.2rem;
}

.year-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.year-preset-btn {
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 140, 0, 0.2);
  border-radius: 16px;
  padding: 0.4rem 0.8rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.year-preset-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 140, 0, 0.2) 50%, transparent 100%);
  transition: left 0.5s ease;
}

.year-preset-btn:hover {
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  color: var(--text-primary);
  border-color: rgba(255, 140, 0, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.year-preset-btn:hover::before {
  left: 100%;
}

.year-preset-btn.is-active {
  background: 
    linear-gradient(135deg, rgba(255, 140, 0, 0.8) 0%, rgba(255, 100, 0, 0.9) 100%);
  border-color: rgba(255, 140, 0, 0.8);
  color: white;
  box-shadow: 
    0 0 16px rgba(255, 140, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 筛选操作 */
.filter-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-clear-btn {
  display: flex;
  align-items: center;
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 140, 0, 0.2);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.filter-clear-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 140, 0, 0.1) 50%, transparent 100%);
  transition: left 0.4s ease;
}

.filter-clear-btn:hover {
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  color: var(--text-primary);
  border-color: rgba(255, 140, 0, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.filter-clear-btn:hover::before {
  left: 100%;
}

.clear-icon {
  margin-right: 0.5rem;
}

.filter-summary {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .filter-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .filter-content {
    padding: 0 1rem 1rem;
  }
  
  .filter-toggle {
    padding: 0.75rem 1rem;
  }
  
  .year-inputs {
    flex-direction: column;
    align-items: stretch;
  }
  
  .year-separator {
    margin: 0;
    text-align: center;
  }
  
  .filter-actions {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .year-presets {
    justify-content: center;
  }
  
  .year-preset-btn {
    flex: 1;
    min-width: 0;
  }
}
</style>